<template>
	<view class="out">
		<input type="text" v-model="firstName" placeholder="请输入名"/>
		<input type="text" v-model="lastName" placeholder="请输入姓"/>
		
		<view>全称：{{fullName}}</view>
	</view>
</template>

<script setup>
import {ref,computed, watch,watchEffect} from "vue";
const firstName = ref("迈克尔");
const lastName = ref("乔丹");
const fullName = ref("")

// 用计算属性来进行进行可以进行缓存，用方法来进行计算没有缓存，用几次执行几次
// const fullName = computed(()=> firstName.value +"-"+ lastName.value)

// watch([firstName,lastName]],([NfirstName,NlastName],[OfirstName,OlastName])=>{
// 	console.log(NfirstName,NlastName);
// })
/*
watch(firstName,(nv,ol)=>{
	console.log(nv,ol);
})
watch(lastName,(nv,ol)=>{
	console.log(nv,ol);
})
*/

watchEffect(()=>{
	console.log(firstName.value,);
})

</script>

<style lang="scss" scoped>
.out{
	padding: 20px;
	input{
		border: 1px solid #ccc;
		height: 40px;
		padding: 1px;
		margin: 10px 0;
	}
}
</style>